<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions">
    <pe:importEnum type="vn.vfriends.vbox.model.RoleCode" var="RoleCode" allSuffix="ALL_ROLE_VALUES" />
    <h:head>
        <title>vBox-New Role</title>
        <style type="text/css">
                .ui-widget {
                    font-family: Tahoma;
                    font-size: 11px;
                }
        </style>
    </h:head>  
    <h:body>
        <h:outputStylesheet library="css" name="component.css"/>
        <f:metadata>
            <f:event type="preRenderView" listener="#{roleBean.preRenderNewView()}" />
        </f:metadata>
        <h:form id="mainForm">
            <p:panel>
                <p:messages id="msgs"/>
                <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                    <p:toolbarGroup align="left">  
                        <p:commandButton value="Save" actionListener="#{roleBean.saveAction()}" update=":mainForm"/>
                        <p:commandButton type="reset" value="Reset"/>
                    </p:toolbarGroup>
                </p:toolbar>

                <h:panelGrid styleClass="panelGrid" columnClasses="ui-state-default labelCol, ui-widget-content, ui-state-default labelCol, ui-widget-content" 
                             columns="2" cellpadding="5" width="100%">
                    <h:outputLabel for="name" style="display: inline; float: right; padding-right: 5px;" value="Name *" />  
                    <p:inputText value="#{roleBean.role.name}" id="name" required="true" label="Name" maxlength="25"
                                 requiredMessage="The Name value is required"/>

                    <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Code" />
                    <p:selectOneMenu value="#{roleBean.role.code}" effect="fade">  
                        <f:selectItems value="#{RoleCode.ALL_ROLE_VALUES}" var="role" itemLabel="#{role.toString()}" itemValue="#{role}"/>  
                    </p:selectOneMenu>

                    <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Description" />
                    <p:inputTextarea style="width:50%; height:100px;" value="#{roleBean.role.description}" maxlength="200"/>
                </h:panelGrid>
            </p:panel>
        </h:form>  
    </h:body>  
</html>
